<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

    <title>补充信息</title>

    <style>
        .small {
            background-color: rgba(255, 255, 255, 0.88);
            height: 56px;
            width: 100%;
            margin-bottom: 7px;
            position: relative;
            text-align: center;
        }

        body {
            background-color: rgba(230, 230, 230, 0.88);
            margin: 70px 0 0 0;
        }

        .name {
            float: left;
            width: 25%;
            font-size: 20px;
            line-height: 55px;
        }

        .value {
            width: 95%;
            text-align: left;
        }

        input[type=text] {
            width: 64%;
            border: 0;
            outline: 0;
            font-size: 19px;
            height: 28px;
            margin-top: 15px;
        }

        .gender {
            position: relative;
            line-height: 30px;
        }

        input[type="radio"] {
            width: 20px;
            height: 20px;
            opacity: 0;
        }

        label {
            position: absolute;
            left: 27%;
            top: 8px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid #999;
        }

        /*设置选中的input的样式*/
        /* + 是兄弟选择器,获取选中后的label元素*/
        input:checked + label {
            background-color: #006eb2;
            border: 1px solid #006eb2;
        }

        input:checked + label::after {
            position: absolute;
            width: auto;
            height: 10px;
            top: 3px;
            left: 6px;
            border: 2px solid #fff;
            border-top: none;
            border-left: none;
            transform: rotate(45deg)
        }

        select {
            -webkit-appearance: none;
            height: 35px;
            font-size: 18px;
            line-height: 55px;
            border: 0;
            background: transparent;
        }

        #input-bt {
            background-color: #2e6da5;
            position: absolute;
            width: 80%;
            height: 8%;
            margin: 30px 0 0 10%;
            border-radius: 20px;
            font-size: 20px;
            color: aliceblue;
            outline: none;
            border: none;
        }

    </style>
</head>
<body>
<div id="big">

    <div class="small">
        <div class="name">姓名</div>
        <div class="value"><input id="from-name" class="input1" type="text" placeholder="输入姓名" name="name"></div>
    </div>
    <!--<div class="small">
        <div class="name">手机号</div>
        <div class="value"><input id="from-phone" class="input1" type="text" placeholder="输入手机号" name="phone"></div>
    </div>-->
    <div class="small">
        <div class="name">性别</div>

        <div class="value gender">
            <div postion：relative>
                <input id="gender1" name="gender" value="男" type="radio" style="position: absolute"><label for="gender1"
                                                                                                           style="top: 18px;">
                <span style="position: absolute;margin-left: 25px;top: -5px;">男</span></label>
            </div>

            <div postion：relative>
                <input id="gender2" name="gender" type="radio" value="女"
                       style="margin-left: 25px;position: absolute"><label
                    for="gender2" style="top: 18px;margin-left: 69px;">
                <span style="position: absolute;margin-left: 25px;top: -5px;">女</span></label>
            </div>
        </div>
    </div>

    <div class="small">
        <div class="name">生日</div>
        <div class="value"><input id="from-birthday" class="input1" type="text" placeholder="八位生日：19990909"
                                  name="birthday"></div>
    </div>

</div>
<div>
    <!--<input id="input" type="button" value="提交" style="border: 0">-->
    <a type="button" id="input-bt" style="border: 0;text-align: center;line-height: 2.5;">
        提交
    </a>
</div>
</body>
<script type="text/javascript" src="js/jweixin-1.3.2.js"></script>
<script src="js/jquery.min.js"></script>
<script>
    (function ($) {
        $.getUrlParam1 = function (name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null)
                return decodeURI(r[2]);
            return null;
        }
    })(jQuery);
</script>

<script>
    var token;

    $(document).ready(function () {
        AreaData();
        VIPType();
    });


    $("#input-bt").click(function () {
        var name = $("#from-name").val();
        /* var phone = $("#from-phone").val();*/
        var gender = $('input:radio[name="gender"]:checked').val();
        var birthday = $("#from-birthday").val();

        var namepattern = /^[\u4E00-\u9FA5]{1,6}$/;
        if (!namepattern.test(name)) {
            alert("姓名格式错误");
            return
        }

        /* var phonepattern = /^1[34578]\d{9}$/;
         if (!phonepattern.test(phone)){
             alert("手机号输入错误");
             return
         }*/
        var D = $('input:radio[name="gender"]:checked').val();
        if (D == null || D == undefined || D == "") {
            alert("选择性别");
            return
        }

        if (birthday.length !== 8) {
            alert("生日格式错误");
            return
        }
        $.ajax({
            "url": "/shop/vip/login/",
            "data": "name=" + name + "&gender=" + gender + "&birthday=" + birthday,
            "type": "POST",
            "dataType": "json",
            "success": function (json) {
                if (json.state == 200) {
                    alert("注册成功");
                    //返回小程序
                    wx.miniProgram.navigateTo({url: '/pages/start/start?token=321'})
                } else {
                    alert(json.message);
                }
            }
        })
    })


</script>
</html>